<template>
    <div>
        <!-- <a-button type="primary" @click="showModal">Open Modal of 1000px width</a-button> -->
        <a-modal v-model:visible="open" width="70vw" title="详情" @ok="handleOk" :footer="null">
            <a-descriptions :column="2" size="middle" bordered class="mb-2">
                <a-descriptions-item label="工作流模板名称：">{{ datas.workflowName || '暂无' }}</a-descriptions-item>
                <a-descriptions-item label="流程类别：">{{ datas.workflowTypeId }}</a-descriptions-item>
                <a-descriptions-item label="流程标识：">{{ datas.workflowId }}</a-descriptions-item>
                <a-descriptions-item label="流程地址：">{{ datas.processUrl }}</a-descriptions-item>
                <a-descriptions-item label="流程发布状态：">{{ datas.workflowStatus }}</a-descriptions-item>
                <a-descriptions-item label="租户ID">{{ datas.tenantId }}</a-descriptions-item>
                <a-descriptions-item label="流程实例描述信息">{{ datas.workflowDescription }}</a-descriptions-item>
            </a-descriptions>
            <a-table :columns="columns" :data-source="linkDataSon" :pagination="false">
                <template #hasChildren="{ text: isSubprocesses }">
                    <span>
                        {{ isSubprocesses === 'N' ? '否' : '是' }}
                    </span>
                </template>
                <template #extra="{ text: configExtra }">
                    <span>
                        {{ configExtra == '001' ? '流程规则' : '业务规则' }}
                    </span>
                </template>
            </a-table>
        </a-modal>
    </div>
</template>

<script setup name="flwWorkflowListDetail">
const columns = [
    {
        title: '环节排序',
        dataIndex: 'linkSort'
    },
    {
        title: '环节名称',
        dataIndex: 'linkName'
    },
    {
        title: '是否有子流程',
        dataIndex: 'isSubprocesses',
        slots: {
            customRender: 'hasChildren',
        }
    },
    {
        title: '流程中心主键',
        dataIndex: 'processCenterId'
    },
    {
        title: '环节对外接口规则标识',
        dataIndex: 'configExtra',
        slots: {
            customRender: 'extra',
        }
    },
    {
        title: '环节类型',
        dataIndex: 'steppTtype'
    },
    {
        title: '环节别名',
        dataIndex: 'stepAlias'
    },
]

const props = defineProps({
    datas: Object
})
const linkDataSon = computed(() => JSON.parse(props.datas.linkDataSon))
console.log(linkDataSon)
const open = ref(false);
const onOpen = () => {

    open.value = true;
};

const handleOk = () => {
    // console.log(e);
    open.value = false;
};
// 抛出函数
defineExpose({
    onOpen
})

</script>

<style lang="scss" scoped></style>
